// 基础Api
import { createBrowserRouter, useParams, Outlet } from 'react-router-dom'; // createHashRouter
import App from './App.tsx';
import './index.css';

const Vite = () => {
  const params = useParams();
  console.log(params);
  return (
    <div>
      Vite 路由组件
      <div>id: {params.goods}</div>
      <div>content: {params.orderId}</div>
    </div>
  );
};

const ErrorPage = () => {
  return <div>404 Not Found</div>;
};

const Goods = () => {
  return (
    <>
      <div>商品信息</div>
      {/* Outlet 相当于vue 的router-view */}
      <Outlet />
    </>
  );
};

const GoodsDetail = () => {
  const params = useParams();
  return (
    <>
      <div>商品详情页</div>
      <div>
        <div>商品名: {params.goods}</div>
      </div>
      <div>
        <div>订单id: {params.orderId}</div>
      </div>
    </>
  );
};

const GoodsCart = () => {
  return <div>购物车</div>;
};

// 动态路由是指匹配路径中包含动态参数的规则。
const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <App />,
      errorElement: <ErrorPage />
    },
    {
      path: '/goods',
      element: <Goods />,
      children: [
        {
          path: ':goods/:orderId',
          element: <GoodsDetail />
        },
        {
          path: 'cart', // 这里不能写/cart。/cart会被识别为根路由，导致报错
          element: <GoodsCart />
        }
      ]
    },
    {
      // http://localhost:5173/app/vite/shop/1212/orderId/122
      path: '/vite/shop/:goods/orderId/:orderId',
      element: <Vite />
    }
  ],
  {
    // basename: 这是一个配置项，用于指定应用的基路径。
    // 相当于vue里面的publicPath。
    // '/app': 这是基路径的具体值，表示所有路由的路径都会以 /app 开头。
    basename: '/app'
  }
);

export default router;
